<template>
  <div class="app-container">
    <el-form :data="filters" inline>
      <el-form-item label="代理账户名：" prop="userName">
        <el-input v-model="filters.userName"></el-input>
      </el-form-item>
      <!--<el-button class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>-->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
    </el-form>
    <!--<div class="tip">-->
    <!--<el-tip>-->
    <!--注：目前只支持平层搜索，不可跨层搜索1-->
    <!--</el-tip>-->
    <!--</div>-->
    <el-table
      border :data="tableData.list"
      v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="代理账户名" align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>
      <el-table-column label="授权上分额度" align="center" prop="firstRechargeSum">
        <template slot-scope="{row}">
          {{row.creditAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="会员上分" align="center" prop="firstRechargeSum">
        <template slot-scope="{row}">
          {{row.usedAmount | currency}}
        </template>
      </el-table-column>
      <!--<el-table-column label="已下分额度" align="center"prop="firstRechargeSum">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.firstRechargeSum | currency}}-->
        <!--</template>-->
      <!--</el-table-column>-->
<!--      <el-table-column label="已清算上分额度" align="center"  prop="firstRechargeSum">-->
<!--        <template slot-scope="{row}">-->
<!--          {{row.settleAmount | currency}}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="已清算上分额度" align="center"  prop="firstRechargeSum">
        <el-table-column
          prop="amount"
          label="账户余额清算"
          align="center"
        >
          <template slot-scope="{row}">
            {{row.deductionAmount | currency}}
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="人工操作清算"
          align="center"
        >
          <template slot-scope="{row}">
            {{row.settleAmount | currency}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="代理上分" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.grantAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="剩余授权上分额度" align="center" prop="firstRechargeSum">
        <template slot-scope="{row}">
          {{row.restAmount | currency}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {
    upAmountDetail as listApi,exportMemberWin
  } from '@/services/api/report';

  import {form, grid, dialog, handleDownload} from '@/build'

  export default {
    name: 'report-company-subList',
    components: {},
    props: ['today', 'rowData','month'],
    mixins: [form, grid, dialog, handleDownload],
    data() {
      return {
        tableData: [],
        filters: {
          userName: undefined,
          size: 20,
          page: 1,
          parentId: this.rowData.uid,
          month: this.rowData.date.replace(/\//g,'-'),
        },
        filterDateType: false,
      }
    },
    methods: {
      submitFilterForm() {
        this.filters = Object.assign({}, this.filters,{page: 1, size: 20})
        this.getAll()
      },
    },
    mounted() {
      if (!_.isUndefined(this.rowData)) {
        const parentId = this.rowData.uid
        this.filters.parentId = parentId
      }
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: (data) => {
          if (data) {
            data.total = Number(data.total);
          }
          return data;
        }
      });
      this.getAll()
    }

  }
</script>

<style lang="scss">
  .thirdListDialog {
    top: 10px !important;
  }
</style>

